<template>
  <div class="q-pa-md">
    <t-list
      class="bg-grey-9 text-white shadow-2 rounded-borders"
      style="max-width: 250px; width: 100%"
    >
      <t-item>
        <t-item-section avatar>
          <t-avatar>
            <img src="https://cdn.quasar.dev/img/avatar6.jpg" />
          </t-avatar>
        </t-item-section>
        <t-item-section>Jane</t-item-section>
      </t-item>

      <t-separator
        ref="sep"
        color="#f33"
        size="5px"
        spaced="50px"
        :vertical="false"
        :visible="true"
        len="80%"
        style="margin-left: 20px"
      />

      <t-item>
        <t-item-section avatar>
          <t-avatar>
            <img src="https://cdn.quasar.dev/img/avatar3.jpg" />
          </t-avatar>
        </t-item-section>
        <t-item-section>Lily</t-item-section>
      </t-item>
    </t-list>

    <div @click="dj">点击隐藏</div>
  </div>
</template>

<!-- ts只是方便开发提示和补全代码，没有用语法 -->
<script setup type="typescript">
import { ref } from 'vue';

const sep = ref(null)

function dj(params) {
	sep.value.vertical = false;
	sep.value.visible = false;
	console.log(sep.value)
}
</script>
